<template>
    <el-card shadow="never">
        <div class="search-wrap">
            <SearchBar :filterList="filterList" @searchVal="searchVal">
            </SearchBar>
        </div>
        <div class="money-box">
            总收益：￥ {{ totalIncome }}
        </div>
        <Table ref="table" :column="columns" :data="tableData">
      </Table>
      <Pagination :total="total" v-model:page="tableQuery.indexPage" v-model:size="tableQuery.pageSize" @pagination="getData"> </Pagination>
   </el-card>
</template>
<script setup lang='ts'>
import userApi from '@/api/user'

const columns = computed(()=>{
   return [
   { label: '用户', key: 'userName'},
   { label: '套餐', key: 'name'},
   { label: '金额', key: 'orderMoney'},
   { label: '用户', key: 'userName'},
   { label: '时间', key: 'createTime' },
 ]
})

const tableData = ref([])
const total = ref(0)

let tableQuery = reactive({
  startTime: '',
  endTime:'',
  indexPage:1,
  pageSize:10
})
const totalIncome = ref(0)
function getData(){
  userApi.totalIncome(tableQuery).then((res:any)=>{
    totalIncome.value = res.totalIncome
    tableData.value = res.page.records
    total.value = res.page.total
  })
}
getData()

const filterList = ref([
  {
    key: 'day',
    type: 'date',
    value: '',
    tip:'',
  }
])

function searchVal(val:any){
  tableQuery = {
    ...tableQuery,
    ...val,
  }
  getData()
}
</script>
<style lang="scss" scoped>
.password-wrap{
   max-width: 400px;
}
.payTime{
   margin-bottom: 10px;
   font-size: 20px;
   font-weight: 600;
}
.pay-money{
   margin-bottom: 10px;
   font-size: 20px;
   font-weight: 600;
}
.money-box{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 12px 0;
    padding: 40px;
    font-size: 30px;
    font-weight: 600;
}
</style>